<template>
	<div class="index-container">

		<el-carousel :interval="5000" arrow="always">
			<!-- <el-carousel-item>
				<div class="item banner">
					<img src="../../assets/index/banner.png"/>
				</div>
			</el-carousel-item> -->
			<el-carousel-item>
				<div class="item banner">
					<img src="../../assets/index/banner1.jpg"/>
				</div>
			</el-carousel-item>
			<el-carousel-item>
				<div class="item banner">
					<img src="../../assets/index/banner2.jpg"/>
				</div>
			</el-carousel-item>
			<el-carousel-item>
				<div class="item banner">
					<img src="../../assets/index/banner3.jpg"/>
				</div>
			</el-carousel-item>
		</el-carousel>
		<!-- <div class="item banner"></div> -->
		<!-- 出版类别 -->
		<div class="item press">
			<div class="toptitle">
				<h3>出版服务项目</h3>
				<p>BOOK PUBLISHING SERVICES</p>
			</div>
			<div class="bottom presslist">
				<div class="listnext">
					<PressVue v-for="(item, index) in pressServiceList" :key="index" :pressMes='item'></PressVue>
					<!-- <PressVue v-for="(item, index) in pressArr" :key="index" :pressMes='item'></PressVue> -->

				</div>

			</div>
		</div>
		<!-- 出版流程 -->
		<div class="item workflow">
			<div class="toptitle">
				<h3>出版合作流程</h3>
				<p style="text-transform:uppercase">Publishing collaboration process</p>
			</div>
			<div class="bottom flowlist">
				<FlowVue v-for="(item, index) in flowArr" :key="index" :iconnum='index + 1' :flowObj='item'></FlowVue>
			</div>
		</div>
		<div class="item bookcontainer">
			<div class="toptitle">
				<h3>新书展示</h3>
				<p>NEW BOOK PRESENTATION</p>
			</div>
			<div class="bottom booklist" ref="booklist" :style="{ height: listheight + 'px' }" @mouseenter="bookEnter"
				@mouseleave="bookLeave">
				<div class="book" ref="books" style="white-space:nowrap" v-if="status">
					<BookItem v-for="(item, index) in bookList" :key="index" :bookItem="item"
						@click.native="toBookDetail(item)"></BookItem>
				</div>
				<!-- <el-carousel :interval="4000" type="card" :autoplay="false" :height="carouselHeight">
					<el-carousel-item v-for="(item,index) in bookList" :key="index" >
						
						<div class="bookbox"  ref="books">
							<div class="bookimg">
								<img :src="item.image" alt="/">
							</div>
							<p>{{ item.name }}</p>
						</div>
					</el-carousel-item>
				</el-carousel> -->
			</div>
			<div class="bottom-control" v-if="false">
				<div @click="toLeft"></div>
				<div @click="toRight"></div>
			</div>

		</div>
	</div>
</template>

<script>
import PressVue from '../PublishItem/PublishItem.vue'
import FlowVue from '../FlowVue/Flowvue.vue'
import BookItem from '../BookItem/BookItem.vue'
export default {
	data() {
		return {
			centerDialogVisible: false,
			isshowqr: false,
			isshowphone: false,
			listheight: '',
			carouselHeight: '',
			liststyle: {
				height: this.listheight
			},
			pressArr: [{
				url: '',
				chName: '学术专著出版',
				enName: 'ACADEMIC USICATON'
			}, {
				url: '',
				chName: '学术专著出版',
				enName: 'ACADEMIC USICATON'
			}, {
				url: '',
				chName: '学术专著出版',
				enName: 'ACADEMIC USICATON'
			}, {
				url: '',
				chName: '学术专著出版',
				enName: 'ACADEMIC USICATON'
			}, {
				url: '',
				chName: '学术专著出版',
				enName: 'ACADEMIC USICATON'
			}, {
				url: '',
				chName: '学术专著出版',
				enName: 'ACADEMIC USICATON'
			}, {
				url: '',
				chName: '学术专著出版',
				enName: 'ACADEMIC USICATON'
			}, {
				url: '',
				chName: '学术专著出版',
				enName: 'ACADEMIC USICATON'
			}],
			flowArr: [{
				title: "确定出版方案",
				content: '与您商定该书出版的具体方案签订委托出版合同'
			}, {
				title: "提交选题资料",
				content: '填写选题信息表提交相关资料'
			}, {
				title: "稿件编辑校对",
				content: '负责稿件的"编、审、校"工作并录入排版'
			}, {
				title: "核发书号验证",
				content: 'ISBN书号、CIP核字号新闻出版广电总局网站均可查'
			}, {
				title: "出版印刷装帧",
				content: '封面内文出版、交出版社制定印刷厂印刷'
			}, {
				title: "按需发行宣传",
				content: '如己委托我们代理发行由发行部排后续发行推广工作'
			}],
			bookMesArr: [{}, {}, {}, {}, {}, {}],
			interId2: null,

			//获取新书接口的参数
			order: 'asc', // 排序，asc／desc
			orderField: 'levelid', // 排序，字段
			page: 1, // 当前页码
			limit: 10, // 每页数

			bookList: [],

			//获取出版服务的参数
			Psorder: '', // 排序，asc／desc
			PsorderField: '', // 排序，字段
			Pspage: 1, // 当前页码
			Pslimit: 10, // 每页数
			pressServiceList: [],
			lunboObj: null,

			refBooks: this.$refs.books,
			status:false

		}
	},

	mounted() {
		this.getInfo();
		this.getPressServiceInfo();
		this.getCorFlow();
		this.startLunbo();
	},
	created(){
		console.log(this.bookList);
	},
	beforeDestroy() {
		clearInterval(this.lunboObj);
		this.lunboObj = null;
	},
	methods: {
		toLeft() {
			let ul = this.$refs.books;
			// 左侧距离
			let leftVal = -250;
			// 定时器
			let interId2 = this.interId2;
			// 清除定时器,防止多次点击
			clearInterval(interId2);
			// 开始滚动
			interId2 = setInterval(() => {
				// 每次向左移动5px
				leftVal += 5;
				// 设置ul距离左侧的距离left
				ul.style.left = leftVal + "px";
				// 滚动一格清除定时器
				if (leftVal == 0) {
					clearInterval(interId2);
					// 向左滚动，先移除ul中最后一个li，然后再获取现在ul中最后一个li并复制一份添加到ul的第一个元素
					// 由于一个li宽度250px，所以再将起始值设为-250px，
					var lastEle = this.getLastElementChild(ul);
					ul.removeChild(lastEle);
					var firstEle = this.getFirstElementChild(ul);
					var cloneEle = this.getLastElementChild(ul).cloneNode(true);
					ul.insertBefore(cloneEle, firstEle);
					leftVal = -250;
					ul.style.left = leftVal + "px";
				}
			}, 20)
		},
		toRight() {
			this.refBooks = this.$refs.books;
			// 左侧距离
			let leftVal = -250;
			// 定时器
			let interId2 = this.interId2;
			// console.log(this.$refs.books);
			// 清除定时器,防止多次点击
			clearInterval(this.interId2);
			this.interId2 = setInterval(() => {
				leftVal -= 5;
				this.refBooks.style.left = leftVal + "px";
				if (leftVal == -500) {
					clearInterval(this.interId2);
					// 右侧和左侧原理相同
					let firstEle = this.getFirstElementChild(this.refBooks);
					this.refBooks.removeChild(firstEle);
					let cloneEle = this.getFirstElementChild(this.refBooks).cloneNode(true);
					this.refBooks.appendChild(cloneEle);
					leftVal = -250;
					this.refBooks.style.left = leftVal + "px";
				}
			}, 20)
		},
		// firstElementChild兼容性处理
		getFirstElementChild(element) {
			var node, nodes = element.childNodes,
				i = 0;
			while (node = nodes[i++]) {
				if (node.nodeType === 1) {
					return node;
				}
			}
			return null;
		},

		// lastElementChild兼容性处理
		getLastElementChild(element) {
			var node, nodes = element.childNodes,
				i = nodes.length - 1;
			while (node = nodes[i--]) {
				if (node.nodeType === 1) {
					return node;
				}
			}
			return null;
		},
		startLunbo() {
			this.lunboObj = setInterval(() => {
				this.toRight();
			}, 5000);
		},
		bookEnter() {

			clearInterval(this.lunboObj);
			// clearInterval(this.interId2);
			// this.interId2=null
			this.lunboObj = null;
			// console.log('暂停');
		},
		bookLeave() {
			this.startLunbo();
			// console.log('重启');
		},
		// 获取新书
		getInfo() {
			var that = this;
			this.$http.get(
				`/bookManagement/books/page?order=${this.order}&orderField=${this.orderField}&page=${this.page}&limit=${this.limit}`
			).then((res) => {
				console.log(res);
				this.status =true;
				that.bookList = res.data.data.list;
				console.log(this.bookList);
				setTimeout(() => {
					// console.log(this.$refs.books.clientHeight);
					let h = this.$refs.books.clientHeight;
					// this.$refs.booklist.style.height = h+"px"
					this.listheight = h;
					this.carouselHeight = h + 'px';
				}, 300)
			}).catch(() => { })
		},

		// 获取出版服务
		getPressServiceInfo() {
			this.$http.get(
				`/bookManagement/pressservice/page?order=${this.Psorder}&orderField=${this.PsorderField}&page=${this.Pspage}&limit=${this.Pslimit}`
			).then((res) => {
				// console.log(res.data.data.list);
				this.pressServiceList = res.data.data.list;
			}).catch(() => { })
		},
		//到新书详情页
		toBookDetail(obj) {
			sessionStorage.setItem('bookDetail',JSON.stringify(obj))
			this.$router.push({
				path: "/bookdetail",
				name: "bookdetail",
				params: obj,
			});
		},
		//获取合作出版流程
		getCorFlow() {
			this.$http.get('/bookManagement/corporationflow/page?order=&orderField=&page=1&limit=6').then(res => {
				// console.log("-------------");
				// console.log(res);
				this.flowArr = res.data.data.list;
			}).catch();
		}



	},
	watch: {

	},
	components: {
		PressVue,
		FlowVue,
		BookItem
	}
}
</script>

<style scoped>
.item {
	width: 100%;
	/* height: 550px; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.banner {
	height: 100%;	
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.banner img{
	height: 100%;
	width:100%;
}


/* 出版类别 */
.press {
	background: url("@/assets/index/bg-press.png") 100% 100% no-repeat;
	background-size: cover;
	position: relative;
}

.press .qrcode,
.press .phone {
	position: absolute;
	height: 90px;
	width: 90px;
	border-radius: 90px;
	background: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

.press .qrcode {
	right: 50px;
	top: 30px;
}

/* .qrcode::after{
  content:"";
			background: url('@/assets/index/press/qrcode.png');
			display:block;
	
} */
.bgqr {
	position: absolute;
	height: 150px;
	width: 150px;
	/* border-radius: 90px; */
	background: white;
	border: 1px solid red;
	bottom: -150px;
	background: url('@/assets/flow/qr.png') no-repeat;
	background-size: contain;
	z-index: 888;
}

.bgqr::before {
	position: absolute;
	content: '';
	top: -10px;
	left: 65px;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	border-bottom: 10px solid #f00;
}

.press .phone {
	right: 50px;
	top: 140px;
}

.bgphone {
	position: absolute;
	width: 150px;
	padding: 20px 10px;
	/* border-radius: 90px; */
	background: white;
	border: 1px solid red;
	bottom: -100px;
	z-index: 888;
}

.bgphone::after {
	position: absolute;
	content: '';
	top: -10px;
	left: 75px;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	border-bottom: 10px solid #f00;
}

.press img {
	height: 45px;
	width: 45px;
}

.toptitle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 80px;
}

.toptitle h3 {
	color: rgb(6, 63, 90);
	font-family: PingFang SC;
	font-size: 50px;
	line-height: 74px;
	letter-spacing: 0px;
	margin: 0px;
	padding: 0;
}

.toptitle p {
	color: rgb(6, 63, 90);
	font-family: PingFang SC;
	font-size: 28px;
	line-height: 28px;
	letter-spacing: 0px;
	margin-top: 10px;
}

.presslist {
	margin-top: 80px;
	margin-bottom: 80px;
	margin-left: 240px;
	margin-right: 240px;
	align-items: center;
}

.listnext {
	/* width: 100%; */
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	/* padding: 0 250px 0px 250px; */
}

.listnext>div {
	margin-top: 20px;
	margin-left: 10px;
	flex-basis: 24%;
	margin-top: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* .presslist:first-child{
  margin-left: 240px;
}
.presslist:last-child{
  margin-right: 240px;
} */
/* 出版流程 */
.workflow {
	background: url("@/assets/index/bg-workflow.png") 100% 100% no-repeat;
	background-size: cover;
}

.flowlist {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	flex-wrap: wrap;
	align-items: center;
	/* margin:0 240px; */
	margin-top: 80px;
	margin-bottom: 80px;
}

.flowlist>div:first-child {
	/* flex: 1; */
	margin-left: 240px;
}

.flowlist>div:last-child {
	margin-right: 240px;
}

/* 新书列表 */

.bookcontainer {
	/* background-image: linear-gradient(to bottom, #fff 50%, #000 0); */
	background: linear-gradient(to bottom,
			rgba(36, 121, 125, 1) 50%,
			rgb(255, 255, 255) 0);
	overflow: hidden;
}

/* .bookcontainer .toptitle {
		
	} */

.bookcontainer .toptitle h3 {
	margin: 0;
	padding: 0;
	color: rgb(255, 255, 255);
	font-family: PingFang SC;
	font-size: 50px;
	line-height: 50px;
}

.bookcontainer .toptitle p {
	color: rgb(255, 255, 255);
	font-family: PingFang SC;
	font-size: 28px;
	line-height: 28px;
}

.booklist {
	width: calc(100% - 250px);
	/* width: 100%; */
	/* height: 460px; */
	overflow: hidden;
	margin-left: 250px;
	margin-right: 250px;
	overflow-x: hidden;
	/* margin-top: 80px; */
	position: relative;
	margin-bottom: 80px;
}

.bookbox {
	display: inline-block;
	/* height: 460px; */
	width: 320px;
}

.bookimg {
	padding: 20px 25px;
}

img {
	height: 360px;
	width: 250px;
}

.bookbox p {
	color: rgb(0, 27, 39);
	font-family: PingFang SC;
	font-size: 18px;
	line-height: 27px;
	letter-spacing: 0px;
	text-align: center;
	margin: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.book {
	position: absolute;
	/* overflow: hidden;
  zoom:1; */
}

.bottom-control {
	margin-top: 80px;
	margin-bottom: 80px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.bottom-control div {
	width: 120px;
	height: 60px;
	background-size: contain;
	background-attachment: fixed;
}

.bottom-control>div:first-child {
	background: url("@/assets/index/book/left-arrow.png") no-repeat;
}

.bottom-control>div:last-child {
	background: url("@/assets/index/book/right-arrow.png") no-repeat;
	margin-left: 10px;
}
</style>
<style>
.el-carousel__container{
	height: 550px;
}
.el-carousel__item h3 {
	color: #475669;
	font-size: 18px;
	opacity: 0.75;
	line-height: 300px;
	margin: 0;
}

.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
	background-color: #d3dce6;
}
</style>